import React, {FC, useState} from 'react';
import { Sortable } from "./components/sortable/Sortable";
import Row from "./components/Row";
import Column from "./components/Column";
import Flex from "./components/Flex";
import Header from "./components/Header";
import Description from "./components/Description";


const widgets: { [key: string]: FC<any> } = {
  Flex, Row, Column, Title: Header, Description,
}

export const dataSource = {
  text: 'xxx',
  name: 'Flex',
  customises: [{
    type: 'drag',
    name: 'Header',
    isRender: true,
    defaultProps: {
      
    },
    customises: [{
      type: 'custom',
      name: 'Title',
    }]
  }, {
    type: 'drag',
    name: 'Description',
    isRender: true,
    customises: [{
      type: 'custom',
      name: 'TitleDesc',
    }]
  }]
}

function Playground ({ dataSource }: any) {
  const [children, setChildren] = useState<any>([]);
  const [$$customise, setCustomise] = useState({
    /*Title: null,
    Description: null,*/
  });
  if (dataSource.customises.length) {
    dataSource.customises.forEach((item: any, index: number) => {
      if (item.type === 'custom') {
        setCustomise({
          ...$$customise,
          [item.name]: () => <Playground dataSource={item} />
        })
      } else {
        const PrivateWidget = widgets[item.name];
        setChildren(() => <PrivateWidget { ...(item.props || {}) } />)
      }
    })
  }
  
  switch (dataSource.name) {
    case "Flex": {
      return (
        <Flex {...(dataSource.props || {})} $$customise={$$customise}>
          { children }
        </Flex>
      )
    }
    default: return null
  }
}


export default Playground;
